<template>
    <div class="global">
        <div class="front-header">
            <div class="flexleft">
                <div class="fronttitle">问卷调查系统</div>
                <div>
                    <el-menu class="menuindex" :default-active="$route.path" mode="horizontal" router>
                        <el-menu-item index="/board">首页</el-menu-item>
                        <el-menu-item index="/wdwj">我的问卷</el-menu-item>
                        <el-menu-item index="/wdjl">我的记录</el-menu-item>

                    </el-menu>
                </div>
            </div>
            <div>

                <el-dropdown>
                    <span class="el-dropdown-link" style="color: #fff;">
                        {{ info.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>

                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <RouterView></RouterView>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import service from '../request/Request';
import router from '../router';
const info = ref({});
onMounted(() => {
    getinfo()
})
const getinfo = async () => {
    const res = await service.get("/info");
    console.log(res)
    info.value = res.data
}
const logout = () => {
    router.push("/")
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    background: rgb(250, 250, 250);
}

.front-header {
    background: #c6ddc4;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
}

.fronttitle {
    font-size: 20px;
    color: #46746f;
    font-weight: bold;
    margin-right: 100px;
}

.flexleft {
    display: flex;
    align-items: center;
}

.menuindex {
    width: 500px;
    background: transparent !important;
}
</style>
<style>
.menuindex .is-active {
    background: #7cb79d !important;
    color: #fff !important;
    border-bottom: 1px solid #000 !important;
}

.el-menu--horizontal>.el-menu-item.is-active {
    color: #fff !important;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    background: #7cb79d !important;
    color: #fff !important;

}

.el-dropdown-link {
    outline: none !important;
}
</style>